<!--
 * @Descripttion: 交融效果
 * @Author: jhw
 * @Date: 2023-08-07 16:34:13
 * @LastEditors: jhw
 * @LastEditTime: 2024-01-02 15:15:02
-->
<template>
  <div class="blendEffect">
    <div class="bubbles">
      <!-- <div class="bubble"></div> -->
    </div>
  </div>
  <svg style="display: none">
    <defs>
      <filter id="blob">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
        <feColorMatrix
          in="blur"
          mode="matrix"
          values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 20 -10
          "
        />
      </filter>
    </defs>
  </svg>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';

// 一次性创建10个气泡
const n = 20;
const timer = ref();

const createBubbles = () => {
  const bubbles = document.querySelector('.bubbles') as HTMLElement;
  for (let i = 0; i < n; i++) {
    const bubble = document.createElement('div');
    bubble.classList.add('bubble');
    const s = Math.random() * 100 + 50;
    const x = Math.random() * (document.body.clientWidth - s);
    const d = Math.random() * 2 + 1;
    bubble.style.setProperty('--x', `${x}px`);
    bubble.style.setProperty('--s', `${s}px`);
    bubble.style.setProperty('--d', `${d}s`);
    bubbles.appendChild(bubble);
    bubble.addEventListener('animationend', (e) => {
      (e.target as HTMLElement).remove();
    });
  }
};

onMounted(() => {
  timer.value = setInterval(() => {
    createBubbles();
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped></style>
